<template>
  <div v-if="value">
    <Card>
      <p slot="title">
        <Breadcrumb separator=">">
          <Breadcrumb-item href="/">个人中心</Breadcrumb-item>
          <Breadcrumb-item href="/components/ScurityInfo">安全中心</Breadcrumb-item>
        </Breadcrumb>
      </p>
      <Row>
        <Col span="22">
        <Row>
          账号密码
        </Row>
        <Row class="des">
          当前密码强度：强
        </Row>
        </Col>
        <Col span="2">
        <a @click="setPwd"> 修改 </a>
        </Col>
      </Row>
      <Row>
        <Col span="22">
        <Row>
          绑定手机
        </Row>
        <Row class="des">
          已绑定手机号：{{userInfo.phoneNumber}}
        </Row>
        </Col>
        <Col span="2">
        <a @click="setPhone"> 修改 </a>
        </Col>
      </Row>
      <Row>
        <Col span="22">
        <Row>
          电子邮箱
        </Row>
        <Row class="des">
          已绑定电子邮箱：{{userInfo.userEmail}}
        </Row>
        </Col>
        <Col span="2">
        <a @click="setEmail"> 修改 </a>
        </Col>
      </Row>
    </Card>

  </div>
</template>

<script>
// @ is an alias to /src

import { Component, Vue, Prop, Emit } from 'vue-property-decorator'

@Component
export default class ScurityInfo extends Vue {
  @Prop({ type: Boolean, default: false }) value

  get userInfo() {
    return this.$store.getters['session/user']
  }

  @Emit('bindSelect')
  setPwd() {
    return '5'
  }

  @Emit('bindSelect')
  setPhone() {
    return '6'
  }

  @Emit('bindSelect')
  setEmail() {
    return '7'
  }
}
</script>
<style scoped>
.user_info_title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.user_info_item {
  font-size: 1.4rem;
  padding: 1rem 0;
}
.user_info_item_detail {
  color: #999;
  padding-right: 1rem;
}
.des {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  color: #999;
}
</style>
